<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="破圈·醒觉 - 基于路西法效应理论的校园霸凌预防与干预系统">
    <meta name="keywords" content="校园关怀,霸凌预防,心理健康,教育科技">
    <title>破圈·醒觉 - 校园关怀系统</title>
    
    <!-- 使用国内CDN加速 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    
    <style>
        :root {
            --primary: #4a6fa5;
            --secondary: #166088;
            --accent: #e63946;
            --success: #28a745;
            --warning: #ffc107;
            --light: #f8f9fa;
            --dark: #343a40;
            --student: #6a89cc;
            --teacher: #e55039;
            --admin: #78e08f;
            --senior: #8e44ad;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--dark);
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        .navbar {
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }
        
        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary);
        }
        
        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover, .nav-links a.active {
            color: var(--primary);
        }
        
        .user-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        /* 主要内容区域 */
        .main-content {
            margin-top: 80px;
            min-height: calc(100vh - 160px);
        }
        
        .page {
            display: none;
            padding: 2rem 0;
        }
        
        .page.active {
            display: block;
        }
        
        /* 卡片样式 */
        .card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-bottom: 1.5rem;
        }
        
        .card-title {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: var(--primary);
            border-bottom: 2px solid var(--light);
            padding-bottom: 0.5rem;
        }
        
        /* 按钮样式 */
        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-block;
            text-align: center;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }
        
        .btn-success {
            background: var(--success);
            color: white;
        }
        
        .btn-warning {
            background: var(--warning);
            color: var(--dark);
        }
        
        .btn-danger {
            background: var(--accent);
            color: white;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: var(--dark);
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        /* 网格布局 */
        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }
        
        .col {
            flex: 1;
            padding: 0 10px;
            min-width: 300px;
        }
        
        /* 角色选择 */
        .role-selection {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }
        
        .role-btn {
            flex: 1;
            min-width: 120px;
            padding: 1rem;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }
        
        .role-btn.active {
            border-color: var(--primary);
            background: var(--primary);
            color: white;
        }
        
        .role-btn.student.active {
            border-color: var(--student);
            background: var(--student);
        }
        
        .role-btn.teacher.active {
            border-color: var(--teacher);
            background: var(--teacher);
        }
        
        .role-btn.senior.active {
            border-color: var(--senior);
            background: var(--senior);
        }
        
        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: white;
            padding: 1.5rem;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary);
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            color: var(--dark);
            font-size: 0.9rem;
        }
        
        /* 列表样式 */
        .list-item {
            padding: 1rem;
            border-bottom: 1px solid #eee;
            transition: background 0.3s;
        }
        
        .list-item:hover {
            background: #f8f9fa;
        }
        
        .list-item:last-child {
            border-bottom: none;
        }
        
        .item-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .item-meta {
            font-size: 0.85rem;
            color: #666;
            display: flex;
            gap: 1rem;
        }
        
        /* 图表容器 */
        .chart-container {
            position: relative;
            height: 300px;
            margin-bottom: 2rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .col {
                flex: 100%;
            }
            
            .role-selection {
                flex-direction: column;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        /* 状态标签 */
        .status-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .status-pending {
            background: #fff3cd;
            color: #856404;
        }
        
        .status-resolved {
            background: #d1edff;
            color: #0c5460;
        }
        
        .status-urgent {
            background: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container nav-container">
            <div class="logo">
                <i class="fas fa-heart"></i>
                <span>破圈·醒觉</span>
            </div>
            
            <ul class="nav-links">
                <li><a href="#" class="nav-link active" data-page="home">首页</a></li>
                <li><a href="#" class="nav-link" data-page="report">问题反馈</a></li>
                <li><a href="#" class="nav-link" data-page="treehole">心灵树洞</a></li>
                <li><a href="#" class="nav-link" data-page="help">求助中心</a></li>
                <li><a href="#" class="nav-link" data-page="vr">VR体验</a></li>
                <li><a href="#" class="nav-link" data-page="analytics">数据分析</a></li>
                <li><a href="#" class="nav-link" data-page="profile">个人中心</a></li>
            </ul>
            
            <div class="user-actions">
                <span id="user-info" style="display: none;"></span>
                <button id="login-btn" class="btn btn-primary">登录/注册</button>
                <button id="logout-btn" class="btn" style="display: none;">退出登录</button>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="container">
            <!-- 首页 -->
            <div id="home" class="page active">
                <div class="card fade-in">
                    <h1>欢迎来到破圈·醒觉</h1>
                    <p>基于路西法效应理论的校园霸凌预防与干预系统</p>
                    
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-number" id="total-users">0</div>
                            <div class="stat-label">注册用户</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number" id="total-reports">0</div>
                            <div class="stat-label">问题反馈</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number" id="help-requests">0</div>
                            <div class="stat-label">求助信息</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number" id="success-cases">0</div>
                            <div class="stat-label">成功干预</div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <h2 class="card-title">系统简介</h2>
                            <p>破圈·醒觉系统基于著名的"路西法效应"心理学理论，通过多角色参与、匿名反馈、VR体验等方式，构建全方位的校园关怀体系。</p>
                            <ul>
                                <li>👥 多角色支持系统</li>
                                <li>🛡️ 匿名安全反馈</li>
                                <li>🎮 VR同理心训练</li>
                                <li>📊 智能数据分析</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="col">
                        <div class="card">
                            <h2 class="card-title">快速入口</h2>
                            <div style="display: flex; flex-direction: column; gap: 1rem;">
                                <button class="btn btn-primary" data-page="report">问题反馈</button>
                                <button class="btn btn-primary" data-page="treehole">心灵树洞</button>
                                <button class="btn btn-primary" data-page="vr">VR体验中心</button>
                                <button class="btn btn-primary" data-page="help">紧急求助</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 问题反馈页面 -->
            <div id="report" class="page">
                <div class="card">
                    <h2 class="card-title">问题反馈</h2>
                    <form id="report-form">
                        <div class="form-group">
                            <label class="form-label">问题类型</label>
                            <select class="form-control" id="report-type" required>
                                <option value="">请选择问题类型</option>
                                <option value="verbal">言语霸凌</option>
                                <option value="social">社交排斥</option>
                                <option value="physical">身体伤害</option>
                                <option value="cyber">网络霸凌</option>
                                <option value="other">其他问题</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">发生地点</label>
                            <input type="text" class="form-control" id="incident-location" placeholder="例如：教室、操场、食堂..." required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">发生时间</label>
                            <input type="datetime-local" class="form-control" id="incident-time" required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">详细描述</label>
                            <textarea class="form-control" id="incident-description" rows="4" placeholder="请详细描述发生的情况..." required></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">您的建议</label>
                            <textarea class="form-control" id="suggestion" rows="3" placeholder="您认为应该如何改善这种情况？"></textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">提交反馈</button>
                    </form>
                </div>
                
                <div class="card">
                    <h2 class="card-title">反馈记录</h2>
                    <div id="reports-list">
                        <!-- 反馈记录将动态加载到这里 -->
                    </div>
                </div>
            </div>

            <!-- 心灵树洞页面 -->
            <div id="treehole" class="page">
                <div class="card">
                    <h2 class="card-title">心灵树洞</h2>
                    <p>在这里，您可以匿名分享心情、困惑或烦恼，也可以为他人提供温暖的支持和建议。</p>
                    
                    <form id="treehole-form">
                        <div class="form-group">
                            <label class="form-label">标题</label>
                            <input type="text" class="form-control" id="treehole-title" placeholder="给您的分享起个标题..." required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">内容</label>
                            <textarea class="form-control" id="treehole-content" rows="4" placeholder="分享您的心情或困惑..." required></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">
                                <input type="checkbox" id="need-help"> 我需要帮助
                            </label>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">发布分享</button>
                    </form>
                </div>
                
                <div class="card">
                    <h2 class="card-title">树洞分享</h2>
                    <div id="treehole-list">
                        <!-- 树洞内容将动态加载到这里 -->
                    </div>
                </div>
            </div>

            <!-- 求助中心页面 -->
            <div id="help" class="page">
                <div class="card">
                    <h2 class="card-title">紧急求助</h2>
                    <p>如果您或他人遇到紧急情况，请立即使用此功能。我们会尽快提供帮助。</p>
                    
                    <div class="alert" style="background: #f8d7da; color: #721c24; padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem;">
                        <strong>紧急提示：</strong> 如果您或他人正处于危险中，请立即联系学校安保部门或拨打110报警电话。
                    </div>
                    
                    <form id="help-form">
                        <div class="form-group">
                            <label class="form-label">求助类型</label>
                            <select class="form-control" id="help-type" required>
                                <option value="">请选择求助类型</option>
                                <option value="urgent">紧急求助</option>
                                <option value="counseling">心理咨询</option>
                                <option value="academic">学业困扰</option>
                                <option value="relationship">人际关系</option>
                                <option value="other">其他问题</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">详细描述</label>
                            <textarea class="form-control" id="help-description" rows="5" placeholder="请详细描述您需要帮助的情况..." required></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">联系方式（可选）</label>
                            <input type="text" class="form-control" id="contact-info" placeholder="电话、微信或其他联系方式">
                        </div>
                        
                        <button type="submit" class="btn btn-danger">提交求助</button>
                    </form>
                </div>
                
                <div class="card">
                    <h2 class="card-title">求助记录</h2>
                    <div id="help-list">
                        <!-- 求助记录将动态加载到这里 -->
                    </div>
                </div>
            </div>

            <!-- VR体验页面 -->
            <div id="vr" class="page">
                <div class="card">
                    <h2 class="card-title">VR同理心体验</h2>
                    <p>通过虚拟现实技术，体验不同角色的视角，增强同理心，理解他人的感受。</p>
                    
                    <div class="row">
                        <div class="col">
                            <div class="card" style="text-align: center; cursor: pointer;" id="vr-scenario-1">
                                <i class="fas fa-user-friends" style="font-size: 3rem; color: var(--student); margin-bottom: 1rem;"></i>
                                <h3>被排斥者视角</h3>
                                <p>体验被社交排斥的感受</p>
                            </div>
                        </div>
                        
                        <div class="col">
                            <div class="card" style="text-align: center; cursor: pointer;" id="vr-scenario-2">
                                <i class="fas fa-users" style="font-size: 3rem; color: var(--teacher); margin-bottom: 1rem;"></i>
                                <h3>旁观者视角</h3>
                                <p>体验作为旁观者的感受</p>
                            </div>
                        </div>
                        
                        <div class="col">
                            <div class="card" style="text-align: center; cursor: pointer;" id="vr-scenario-3">
                                <i class="fas fa-user-shield" style="font-size: 3rem; color: var(--senior); margin-bottom: 1rem;"></i>
                                <h3>支持者视角</h3>
                                <p>学习如何提供有效支持</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card" id="vr-experience" style="display: none;">
                    <h2 class="card-title" id="vr-scenario-title">VR体验</h2>
                    <div id="vr-content">
                        <!-- VR体验内容将动态加载到这里 -->
                    </div>
                    <button class="btn btn-primary" id="exit-vr">退出体验</button>
                </div>
                
                <div class="card">
                    <h2 class="card-title">体验记录</h2>
                    <div id="vr-reflections-list">
                        <!-- VR体验反思将动态加载到这里 -->
                    </div>
                </div>
            </div>

            <!-- 数据分析页面 -->
            <div id="analytics" class="page">
                <div class="card">
                    <h2 class="card-title">数据统计</h2>
                    
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-number" id="analytics-users">0</div>
                            <div class="stat-label">用户总数</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number" id="analytics-reports">0</div>
                            <div class="stat-label">问题反馈</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number" id="analytics-treeholes">0</div>
                            <div class="stat-label">树洞分享</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number" id="analytics-help">0</div>
                            <div class="stat-label">求助记录</div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col">
                        <div class="card">
                            <h2 class="card-title">问题类型分布</h2>
                            <div class="chart-container">
                                <canvas id="report-type-chart"></canvas>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col">
                        <div class="card">
                            <h2 class="card-title">情绪趋势</h2>
                            <div class="chart-container">
                                <canvas id="mood-trend-chart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <h2 class="card-title">干预效果分析</h2>
                    <div class="chart-container">
                        <canvas id="intervention-chart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 个人中心页面 -->
            <div id="profile" class="page">
                <div class="card">
                    <h2 class="card-title">个人信息</h2>
                    <div id="user-profile">
                        <!-- 用户信息将动态加载到这里 -->
                    </div>
                </div>
                
                <div class="card">
                    <h2 class="card-title">数据管理</h2>
                    <div class="form-group">
                        <label class="form-label">数据备份与恢复</label>
                        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                            <button id="export-data" class="btn btn-success">导出数据</button>
                            <button id="import-data" class="btn btn-warning">导入数据</button>
                            <input type="file" id="import-file" accept=".json" style="display: none;">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Gitee同步</label>
                        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                            <button id="sync-to-gitee" class="btn">同步到Gitee</button>
                            <button id="sync-from-gitee" class="btn">从Gitee同步</button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">系统维护</label>
                        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                            <button id="clear-data" class="btn btn-danger">清除所有数据</button>
                            <button id="reset-data" class="btn btn-warning">重置为示例数据</button>
                        </div>
                    </div>
                    
                    <div id="sync-status" style="margin-top: 1rem; padding: 1rem; background: #f8f9fa; border-radius: 8px; display: none;">
                        <strong>同步状态:</strong> <span id="sync-status-text"></span>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 登录模态框 -->
    <div id="login-modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center;">
        <div class="card" style="max-width: 400px; width: 90%;">
            <h2 class="card-title">登录/注册</h2>
            <form id="login-form">
                <div class="form-group">
                    <label class="form-label">选择角色</label>
                    <div class="role-selection">
                        <div class="role-btn student active" data-role="student">学生</div>
                        <div class="role-btn senior" data-role="senior">学长</div>
                        <div class="role-btn teacher" data-role="teacher">教师</div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">真实姓名（可选）</label>
                    <input type="text" class="form-control" id="realname">
                </div>
                
                <div class="form-group">
                    <label class="form-label">班级/部门</label>
                    <input type="text" class="form-control" id="user-class">
                </div>
                
                <div style="display: flex; gap: 1rem;">
                    <button type="submit" class="btn btn-primary" style="flex: 1;">登录</button>
                    <button type="button" id="register-btn" class="btn btn-success" style="flex: 1;">注册</button>
                </div>
                
                <div style="margin-top: 1rem; text-align: center;">
                    <button type="button" id="close-login" class="btn" style="background: none; color: var(--primary);">取消</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 数据存储和管理
        const AppStorage = {
            // 初始化数据
            init: function() {
                // 检查是否需要初始化默认数据
                if (!localStorage.getItem('breakCircleInitialized')) {
                    this.initializeDefaultData();
                }
                this.updateDashboardStats();
            },
            
            // 初始化默认数据
            initializeDefaultData: function() {
                const defaultUsers = [
                    {
                        id: 'admin',
                        username: 'admin',
                        password: 'admin123',
                        role: 'teacher',
                        registerTime: new Date().toISOString(),
                        class: '系统管理',
                        realName: '系统管理员'
                    },
                    {
                        id: 'senior1',
                        username: 'senior1',
                        password: 'senior123',
                        role: 'senior',
                        registerTime: new Date().toISOString(),
                        class: '高年级学生',
                        realName: '张学长'
                    },
                    {
                        id: 'student1',
                        username: 'student1',
                        password: 'student123',
                        role: 'student',
                        registerTime: new Date().toISOString(),
                        class: '九年级一班',
                        realName: '李同学'
                    }
                ];
                
                localStorage.setItem('breakCircleUsers', JSON.stringify(defaultUsers));
                localStorage.setItem('breakCircleInitialized', 'true');
                
                // 初始化示例数据
                this.initializeSampleData();
            },
            
            // 初始化示例数据
            initializeSampleData: function() {
                // 示例反馈数据
                const sampleReports = [
                    {
                        id: '1',
                        type: 'social',
                        location: 'classroom',
                        description: '课间休息时，看到有同学被孤立，希望能引起老师的关注。',
                        suggestion: '建议组织一些团队合作活动，增进同学之间的了解。',
                        time: new Date().toISOString(),
                        timestamp: new Date().toISOString(),
                        status: '已处理',
                        submitter: '匿名用户'
                    },
                    {
                        id: '2',
                        type: 'verbal',
                        location: 'playground',
                        description: '在操场上听到有同学用不礼貌的语言称呼其他同学。',
                        suggestion: '加强文明礼仪教育。',
                        time: new Date(Date.now() - 86400000).toISOString(),
                        timestamp: new Date(Date.now() - 86400000).toISOString(),
                        status: '处理中',
                        submitter: '匿名用户'
                    }
                ];
                
                // 示例树洞数据
                const sampleTreeholes = [
                    {
                        id: '1',
                        title: '最近感觉压力很大',
                        content: '期中考试快到了，感觉各科压力都很大，有时候会失眠。',
                        helpNeeded: 'yes',
                        timestamp: new Date().toISOString(),
                        author: '匿名用户',
                        replies: [
                            {
                                id: '1-1',
                                content: '同学你好，我去年也经历过这个阶段。建议制定合理的学习计划，保证充足睡眠，适当运动会有帮助。',
                                author: '张学长',
                                role: '学长',
                                timestamp: new Date().toISOString()
                            }
                        ]
                    }
                ];
                
                // 示例求助数据
                const sampleHelpRequests = [
                    {
                        id: '1',
                        type: 'counseling',
                        description: '最近情绪很低落，对什么都提不起兴趣，不知道该怎么办。',
                        contactInfo: '',
                        timestamp: new Date().toISOString(),
                        status: '已回复',
                        submitter: '匿名用户'
                    }
                ];
                
                // 示例VR体验数据
                const sampleVRReflections = [
                    {
                        id: '1',
                        scenario: '被排斥者视角',
                        reflection: '通过这次体验，我深刻理解了被排斥的感受，以后会更加注意自己的言行。',
                        timestamp: new Date().toISOString(),
                        user: '匿名用户'
                    }
                ];
                
                localStorage.setItem('breakCircleReports', JSON.stringify(sampleReports));
                localStorage.setItem('breakCircleTreeholes', JSON.stringify(sampleTreeholes));
                localStorage.setItem('breakCircleHelpRequests', JSON.stringify(sampleHelpRequests));
                localStorage.setItem('breakCircleVRReflections', JSON.stringify(sampleVRReflections));
                localStorage.setItem('breakCircleMoodRecords', JSON.stringify([]));
            },
            
            // 获取所有用户
            getUsers: function() {
                const users = localStorage.getItem('breakCircleUsers');
                return users ? JSON.parse(users) : [];
            },
            
            // 保存用户
            saveUser: function(user) {
                const users = this.getUsers();
                user.id = Date.now().toString();
                user.registerTime = new Date().toISOString();
                users.push(user);
                localStorage.setItem('breakCircleUsers', JSON.stringify(users));
                return user;
            },
            
            // 验证用户登录
            validateUser: function(username, password) {
                const users = this.getUsers();
                return users.find(user => user.username === username && user.password === password);
            },
            
            // 获取问题反馈
            getReports: function() {
                const reports = localStorage.getItem('breakCircleReports');
                return reports ? JSON.parse(reports) : [];
            },
            
            // 保存问题反馈
            saveReport: function(report) {
                const reports = this.getReports();
                report.id = Date.now().toString();
                report.timestamp = new Date().toISOString();
                report.status = '待处理';
                report.submitter = AppState.currentUser ? AppState.currentUser.username : '匿名用户';
                reports.unshift(report);
                localStorage.setItem('breakCircleReports', JSON.stringify(reports));
                this.updateDashboardStats();
                return report;
            },
            
            // 获取树洞内容
            getTreeholes: function() {
                const treeholes = localStorage.getItem('breakCircleTreeholes');
                return treeholes ? JSON.parse(treeholes) : [];
            },
            
            // 保存树洞内容
            saveTreehole: function(treehole) {
                const treeholes = this.getTreeholes();
                treehole.id = Date.now().toString();
                treehole.timestamp = new Date().toISOString();
                treehole.author = AppState.currentUser ? AppState.currentUser.username : '匿名用户';
                treehole.replies = [];
                treeholes.unshift(treehole);
                localStorage.setItem('breakCircleTreeholes', JSON.stringify(treeholes));
                this.updateDashboardStats();
                return treehole;
            },
            
            // 回复树洞
            replyToTreehole: function(treeholeId, reply) {
                const treeholes = this.getTreeholes();
                const treehole = treeholes.find(t => t.id === treeholeId);
                if (treehole) {
                    reply.id = `${treeholeId}-${treehole.replies.length + 1}`;
                    reply.timestamp = new Date().toISOString();
                    reply.author = AppState.currentUser ? AppState.currentUser.realName || AppState.currentUser.username : '匿名用户';
                    reply.role = AppState.currentUser ? AppState.currentUser.role : '用户';
                    treehole.replies.push(reply);
                    localStorage.setItem('breakCircleTreeholes', JSON.stringify(treeholes));
                    return reply;
                }
                return null;
            },
            
            // 获取求助记录
            getHelpRequests: function() {
                const helpRequests = localStorage.getItem('breakCircleHelpRequests');
                return helpRequests ? JSON.parse(helpRequests) : [];
            },
            
            // 保存求助记录
            saveHelpRequest: function(helpRequest) {
                const helpRequests = this.getHelpRequests();
                helpRequest.id = Date.now().toString();
                helpRequest.timestamp = new Date().toISOString();
                helpRequest.status = '待处理';
                helpRequest.submitter = AppState.currentUser ? AppState.currentUser.username : '匿名用户';
                helpRequests.unshift(helpRequest);
                localStorage.setItem('breakCircleHelpRequests', JSON.stringify(helpRequests));
                this.updateDashboardStats();
                return helpRequest;
            },
            
            // 获取VR体验记录
            getVRReflections: function() {
                const vrReflections = localStorage.getItem('breakCircleVRReflections');
                return vrReflections ? JSON.parse(vrReflections) : [];
            },
            
            // 保存VR体验记录
            saveVRReflection: function(reflection) {
                const vrReflections = this.getVRReflections();
                reflection.id = Date.now().toString();
                reflection.timestamp = new Date().toISOString();
                reflection.user = AppState.currentUser ? AppState.currentUser.username : '匿名用户';
                vrReflections.unshift(reflection);
                localStorage.setItem('breakCircleVRReflections', JSON.stringify(vrReflections));
                return reflection;
            },
            
            // 更新仪表盘统计
            updateDashboardStats: function() {
                const users = this.getUsers().length;
                const reports = this.getReports().length;
                const helpRequests = this.getHelpRequests().length;
                const successCases = this.getReports().filter(r => r.status === '已处理').length;
                
                document.getElementById('total-users').textContent = users;
                document.getElementById('total-reports').textContent = reports;
                document.getElementById('help-requests').textContent = helpRequests;
                document.getElementById('success-cases').textContent = successCases;
                
                // 更新分析页面统计
                document.getElementById('analytics-users').textContent = users;
                document.getElementById('analytics-reports').textContent = reports;
                document.getElementById('analytics-treeholes').textContent = this.getTreeholes().length;
                document.getElementById('analytics-help').textContent = helpRequests;
            },
            
            // 数据导出功能
            exportData: function() {
                const data = {
                    users: this.getUsers(),
                    reports: this.getReports(),
                    treeholes: this.getTreeholes(),
                    helpRequests: this.getHelpRequests(),
                    vrReflections: this.getVRReflections(),
                    exportTime: new Date().toISOString()
                };
                
                const dataStr = JSON.stringify(data, null, 2);
                const dataBlob = new Blob([dataStr], {type: 'application/json'});
                
                return URL.createObjectURL(dataBlob);
            },
            
            // 数据导入功能
            importData: function(jsonData) {
                try {
                    const data = JSON.parse(jsonData);
                    
                    if (data.users) localStorage.setItem('breakCircleUsers', JSON.stringify(data.users));
                    if (data.reports) localStorage.setItem('breakCircleReports', JSON.stringify(data.reports));
                    if (data.treeholes) localStorage.setItem('breakCircleTreeholes', JSON.stringify(data.treeholes));
                    if (data.helpRequests) localStorage.setItem('breakCircleHelpRequests', JSON.stringify(data.helpRequests));
                    if (data.vrReflections) localStorage.setItem('breakCircleVRReflections', JSON.stringify(data.vrReflections));
                    
                    return true;
                } catch (e) {
                    console.error('数据导入失败:', e);
                    return false;
                }
            }
        };

        // Gitee特定功能 - 离线支持
        const GiteeAppManager = {
            // 检查网络状态
            checkOnlineStatus: function() {
                return navigator.onLine;
            },
            
            // 初始化Service Worker（如果支持）
            initServiceWorker: function() {
                if ('serviceWorker' in navigator) {
                    navigator.serviceWorker.register('./sw.js')
                        .then(registration => {
                            console.log('Service Worker 注册成功:', registration);
                        })
                        .catch(error => {
                            console.log('Service Worker 注册失败:', error);
                        });
                }
            },
            
            // 数据同步到Gitee（模拟）
            syncToGitee: function() {
                if (!this.checkOnlineStatus()) {
                    showNotification('网络未连接，数据将在恢复连接后同步', true);
                    return false;
                }
                
                // 模拟同步到Gitee
                showNotification('数据同步到Gitee中...');
                
                setTimeout(() => {
                    // 在实际应用中，这里应该是真实的API调用
                    localStorage.setItem('lastGiteeSync', new Date().toISOString());
                    showNotification('数据同步完成');
                }, 2000);
                
                return true;
            },
            
            // 从Gitee同步数据（模拟）
            syncFromGitee: function() {
                if (!this.checkOnlineStatus()) {
                    showNotification('网络未连接，无法从Gitee同步数据', true);
                    return false;
                }
                
                showNotification('从Gitee同步数据中...');
                
                setTimeout(() => {
                    // 模拟从Gitee获取数据
                    showNotification('数据同步完成');
                    location.reload(); // 刷新页面应用新数据
                }, 2000);
                
                return true;
            }
        };

        // 应用状态管理
        const AppState = {
            currentUser: null,
            currentPage: 'home',
            
            // 初始化应用状态
            init: function() {
                // 检查是否有已登录用户
                const savedUser = localStorage.getItem('breakCircleCurrentUser');
                if (savedUser) {
                    this.currentUser = JSON.parse(savedUser);
                    this.updateUserInterface();
                }
                
                // 初始化页面导航
                this.initPageNavigation();
                
                // 初始化事件监听
                this.initEventListeners();
                
                // 初始化数据
                AppStorage.init();
                
                // 加载初始页面内容
                this.loadPageContent(this.currentPage);
            },
            
            // 初始化页面导航
            initPageNavigation: function() {
                const navLinks = document.querySelectorAll('.nav-link');
                navLinks.forEach(link => {
                    link.addEventListener('click', (e) => {
                        e.preventDefault();
                        const page = link.getAttribute('data-page');
                        this.navigateToPage(page);
                    });
                });
                
                // 快速入口按钮
                const quickLinks = document.querySelectorAll('button[data-page]');
                quickLinks.forEach(button => {
                    button.addEventListener('click', () => {
                        const page = button.getAttribute('data-page');
                        this.navigateToPage(page);
                    });
                });
            },
            
            // 初始化事件监听
            initEventListeners: function() {
                // 登录/注册按钮
                document.getElementById('login-btn').addEventListener('click', () => {
                    this.showLoginModal();
                });
                
                // 退出登录按钮
                document.getElementById('logout-btn').addEventListener('click', () => {
                    this.logout();
                });
                
                // 关闭登录模态框
                document.getElementById('close-login').addEventListener('click', () => {
                    this.hideLoginModal();
                });
                
                // 角色选择
                const roleButtons = document.querySelectorAll('.role-btn');
                roleButtons.forEach(button => {
                    button.addEventListener('click', () => {
                        roleButtons.forEach(btn => btn.classList.remove('active'));
                        button.classList.add('active');
                    });
                });
                
                // 注册按钮
                document.getElementById('register-btn').addEventListener('click', () => {
                    this.registerUser();
                });
                
                // 登录表单提交
                document.getElementById('login-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.loginUser();
                });
                
                // 问题反馈表单
                document.getElementById('report-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.submitReport();
                });
                
                // 树洞表单
                document.getElementById('treehole-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.submitTreehole();
                });
                
                // 求助表单
                document.getElementById('help-form').addEventListener('submit', (e) => {
                    e.preventDefault();
                    this.submitHelpRequest();
                });
                
                // VR体验场景
                document.getElementById('vr-scenario-1').addEventListener('click', () => {
                    this.startVRExperience('被排斥者视角');
                });
                document.getElementById('vr-scenario-2').addEventListener('click', () => {
                    this.startVRExperience('旁观者视角');
                });
                document.getElementById('vr-scenario-3').addEventListener('click', () => {
                    this.startVRExperience('支持者视角');
                });
                
                // 退出VR体验
                document.getElementById('exit-vr').addEventListener('click', () => {
                    this.exitVRExperience();
                });
                
                // 数据管理功能
                this.initDataManagement();
            },
            
            // 初始化数据管理功能
            initDataManagement: function() {
                // 数据导出
                document.getElementById('export-data').addEventListener('click', function() {
                    const dataUrl = AppStorage.exportData();
                    const a = document.createElement('a');
                    a.href = dataUrl;
                    a.download = `破圈醒觉数据备份_${new Date().toISOString().split('T')[0]}.json`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    
                    showNotification('数据导出成功');
                });
                
                // 数据导入
                document.getElementById('import-data').addEventListener('click', function() {
                    document.getElementById('import-file').click();
                });
                
                document.getElementById('import-file').addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (!file) return;
                    
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const success = AppStorage.importData(e.target.result);
                        if (success) {
                            showNotification('数据导入成功，页面将刷新');
                            setTimeout(() => location.reload(), 1500);
                        } else {
                            showNotification('数据导入失败，请检查文件格式', true);
                        }
                    };
                    reader.readAsText(file);
                    
                    // 重置文件输入
                    e.target.value = '';
                });
                
                // Gitee同步
                document.getElementById('sync-to-gitee').addEventListener('click', function() {
                    GiteeAppManager.syncToGitee();
                });
                
                document.getElementById('sync-from-gitee').addEventListener('click', function() {
                    GiteeAppManager.syncFromGitee();
                });
                
                // 数据清除和重置
                document.getElementById('clear-data').addEventListener('click', function() {
                    if (confirm('确定要清除所有数据吗？此操作不可恢复！')) {
                        localStorage.clear();
                        showNotification('所有数据已清除，页面将刷新');
                        setTimeout(() => location.reload(), 1500);
                    }
                });
                
                document.getElementById('reset-data').addEventListener('click', function() {
                    if (confirm('确定要重置为示例数据吗？当前数据将被覆盖！')) {
                        localStorage.removeItem('breakCircleInitialized');
                        AppStorage.init();
                        showNotification('已重置为示例数据，页面将刷新');
                        setTimeout(() => location.reload(), 1500);
                    }
                });
            },
            
            // 显示登录模态框
            showLoginModal: function() {
                document.getElementById('login-modal').style.display = 'flex';
            },
            
            // 隐藏登录模态框
            hideLoginModal: function() {
                document.getElementById('login-modal').style.display = 'none';
                document.getElementById('login-form').reset();
            },
            
            // 注册用户
            registerUser: function() {
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                const realName = document.getElementById('realname').value;
                const userClass = document.getElementById('user-class').value;
                const role = document.querySelector('.role-btn.active').getAttribute('data-role');
                
                if (!username || !password) {
                    showNotification('用户名和密码不能为空', true);
                    return;
                }
                
                // 检查用户名是否已存在
                const users = AppStorage.getUsers();
                if (users.find(user => user.username === username)) {
                    showNotification('用户名已存在', true);
                    return;
                }
                
                // 创建新用户
                const newUser = {
                    username,
                    password,
                    role,
                    realName,
                    class: userClass
                };
                
                AppStorage.saveUser(newUser);
                showNotification('注册成功，请登录');
            },
            
            // 用户登录
            loginUser: function() {
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                
                if (!username || !password) {
                    showNotification('用户名和密码不能为空', true);
                    return;
                }
                
                const user = AppStorage.validateUser(username, password);
                if (user) {
                    this.currentUser = user;
                    localStorage.setItem('breakCircleCurrentUser', JSON.stringify(user));
                    this.updateUserInterface();
                    this.hideLoginModal();
                    showNotification(`欢迎回来，${user.realName || user.username}！`);
                    
                    // 重新加载当前页面内容
                    this.loadPageContent(this.currentPage);
                } else {
                    showNotification('用户名或密码错误', true);
                }
            },
            
            // 退出登录
            logout: function() {
                this.currentUser = null;
                localStorage.removeItem('breakCircleCurrentUser');
                this.updateUserInterface();
                showNotification('已退出登录');
                
                // 重新加载当前页面内容
                this.loadPageContent(this.currentPage);
            },
            
            // 更新用户界面
            updateUserInterface: function() {
                const loginBtn = document.getElementById('login-btn');
                const logoutBtn = document.getElementById('logout-btn');
                const userInfo = document.getElementById('user-info');
                
                if (this.currentUser) {
                    loginBtn.style.display = 'none';
                    logoutBtn.style.display = 'block';
                    userInfo.style.display = 'block';
                    userInfo.textContent = `欢迎，${this.currentUser.realName || this.currentUser.username} (${this.getRoleName(this.currentUser.role)})`;
                } else {
                    loginBtn.style.display = 'block';
                    logoutBtn.style.display = 'none';
                    userInfo.style.display = 'none';
                }
            },
            
            // 获取角色名称
            getRoleName: function(role) {
                const roleNames = {
                    'student': '学生',
                    'senior': '学长',
                    'teacher': '教师'
                };
                return roleNames[role] || '用户';
            },
            
            // 页面导航
            navigateToPage: function(page) {
                // 更新导航链接
                document.querySelectorAll('.nav-link').forEach(link => {
                    link.classList.remove('active');
                });
                document.querySelector(`.nav-link[data-page="${page}"]`).classList.add('active');
                
                // 隐藏所有页面
                document.querySelectorAll('.page').forEach(pageEl => {
                    pageEl.classList.remove('active');
                });
                
                // 显示目标页面
                document.getElementById(page).classList.add('active');
                
                // 更新当前页面
                this.currentPage = page;
                
                // 加载页面内容
                this.loadPageContent(page);
            },
            
            // 加载页面内容
            loadPageContent: function(page) {
                switch(page) {
                    case 'home':
                        this.loadHomePage();
                        break;
                    case 'report':
                        this.loadReportPage();
                        break;
                    case 'treehole':
                        this.loadTreeholePage();
                        break;
                    case 'help':
                        this.loadHelpPage();
                        break;
                    case 'vr':
                        this.loadVRPage();
                        break;
                    case 'analytics':
                        this.loadAnalyticsPage();
                        break;
                    case 'profile':
                        this.loadProfilePage();
                        break;
                }
            },
            
            // 加载首页内容
            loadHomePage: function() {
                // 首页内容已静态加载，只需更新统计
                AppStorage.updateDashboardStats();
            },
            
            // 加载问题反馈页面
            loadReportPage: function() {
                const reports = AppStorage.getReports();
                const reportsList = document.getElementById('reports-list');
                
                if (reports.length === 0) {
                    reportsList.innerHTML = '<p style="text-align: center; padding: 2rem; color: #666;">暂无反馈记录</p>';
                    return;
                }
                
                reportsList.innerHTML = reports.map(report => `
                    <div class="list-item">
                        <div class="item-title">${this.getReportTypeName(report.type)} - ${report.location}</div>
                        <div class="item-meta">
                            <span>${new Date(report.timestamp).toLocaleString()}</span>
                            <span class="status-badge ${this.getStatusClass(report.status)}">${report.status}</span>
                        </div>
                        <p>${report.description}</p>
                        ${report.suggestion ? `<p><strong>建议：</strong>${report.suggestion}</p>` : ''}
                    </div>
                `).join('');
            },
            
            // 获取问题类型名称
            getReportTypeName: function(type) {
                const typeNames = {
                    'verbal': '言语霸凌',
                    'social': '社交排斥',
                    'physical': '身体伤害',
                    'cyber': '网络霸凌',
                    'other': '其他问题'
                };
                return typeNames[type] || '未知类型';
            },
            
            // 获取状态类名
            getStatusClass: function(status) {
                const statusClasses = {
                    '待处理': 'status-pending',
                    '处理中': 'status-pending',
                    '已处理': 'status-resolved',
                    '紧急': 'status-urgent'
                };
                return statusClasses[status] || 'status-pending';
            },
            
            // 提交问题反馈
            submitReport: function() {
                const type = document.getElementById('report-type').value;
                const location = document.getElementById('incident-location').value;
                const time = document.getElementById('incident-time').value;
                const description = document.getElementById('incident-description').value;
                const suggestion = document.getElementById('suggestion').value;
                
                const report = {
                    type,
                    location,
                    time,
                    description,
                    suggestion
                };
                
                AppStorage.saveReport(report);
                document.getElementById('report-form').reset();
                showNotification('问题反馈提交成功');
                
                // 重新加载反馈列表
                this.loadReportPage();
            },
            
            // 加载心灵树洞页面
            loadTreeholePage: function() {
                const treeholes = AppStorage.getTreeholes();
                const treeholeList = document.getElementById('treehole-list');
                
                if (treeholes.length === 0) {
                    treeholeList.innerHTML = '<p style="text-align: center; padding: 2rem; color: #666;">暂无树洞分享</p>';
                    return;
                }
                
                treeholeList.innerHTML = treeholes.map(treehole => `
                    <div class="list-item">
                        <div class="item-title">${treehole.title}</div>
                        <div class="item-meta">
                            <span>${treehole.author} • ${new Date(treehole.timestamp).toLocaleString()}</span>
                            ${treehole.helpNeeded ? '<span class="status-badge status-urgent">需要帮助</span>' : ''}
                        </div>
                        <p>${treehole.content}</p>
                        
                        ${treehole.replies && treehole.replies.length > 0 ? `
                            <div style="margin-top: 1rem; padding: 1rem; background: #f8f9fa; border-radius: 8px;">
                                <h4 style="margin-bottom: 0.5rem;">回复</h4>
                                ${treehole.replies.map(reply => `
                                    <div style="margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eee;">
                                        <div><strong>${reply.author} (${reply.role})</strong> • ${new Date(reply.timestamp).toLocaleString()}</div>
                                        <p style="margin: 0.5rem 0 0 0;">${reply.content}</p>
                                    </div>
                                `).join('')}
                            </div>
                        ` : ''}
                        
                        ${this.currentUser && this.currentUser.role !== 'student' ? `
                            <div style="margin-top: 1rem;">
                                <textarea class="form-control" id="reply-${treehole.id}" rows="2" placeholder="写下您的回复..."></textarea>
                                <button class="btn btn-primary" style="margin-top: 0.5rem;" onclick="AppState.submitTreeholeReply('${treehole.id}')">回复</button>
                            </div>
                        ` : ''}
                    </div>
                `).join('');
            },
            
            // 提交树洞分享
            submitTreehole: function() {
                const title = document.getElementById('treehole-title').value;
                const content = document.getElementById('treehole-content').value;
                const helpNeeded = document.getElementById('need-help').checked ? 'yes' : 'no';
                
                const treehole = {
                    title,
                    content,
                    helpNeeded
                };
                
                AppStorage.saveTreehole(treehole);
                document.getElementById('treehole-form').reset();
                showNotification('树洞分享发布成功');
                
                // 重新加载树洞列表
                this.loadTreeholePage();
            },
            
            // 提交树洞回复
            submitTreeholeReply: function(treeholeId) {
                const replyContent = document.getElementById(`reply-${treeholeId}`).value;
                
                if (!replyContent) {
                    showNotification('回复内容不能为空', true);
                    return;
                }
                
                const reply = {
                    content: replyContent
                };
                
                AppStorage.replyToTreehole(treeholeId, reply);
                document.getElementById(`reply-${treeholeId}`).value = '';
                showNotification('回复成功');
                
                // 重新加载树洞列表
                this.loadTreeholePage();
            },
            
            // 加载求助中心页面
            loadHelpPage: function() {
                const helpRequests = AppStorage.getHelpRequests();
                const helpList = document.getElementById('help-list');
                
                if (helpRequests.length === 0) {
                    helpList.innerHTML = '<p style="text-align: center; padding: 2rem; color: #666;">暂无求助记录</p>';
                    return;
                }
                
                helpList.innerHTML = helpRequests.map(request => `
                    <div class="list-item">
                        <div class="item-title">${this.getHelpTypeName(request.type)}</div>
                        <div class="item-meta">
                            <span>${new Date(request.timestamp).toLocaleString()}</span>
                            <span class="status-badge ${this.getStatusClass(request.status)}">${request.status}</span>
                        </div>
                        <p>${request.description}</p>
                        ${request.contactInfo ? `<p><strong>联系方式：</strong>${request.contactInfo}</p>` : ''}
                    </div>
                `).join('');
            },
            
            // 获取求助类型名称
            getHelpTypeName: function(type) {
                const typeNames = {
                    'urgent': '紧急求助',
                    'counseling': '心理咨询',
                    'academic': '学业困扰',
                    'relationship': '人际关系',
                    'other': '其他问题'
                };
                return typeNames[type] || '未知类型';
            },
            
            // 提交求助请求
            submitHelpRequest: function() {
                const type = document.getElementById('help-type').value;
                const description = document.getElementById('help-description').value;
                const contactInfo = document.getElementById('contact-info').value;
                
                const helpRequest = {
                    type,
                    description,
                    contactInfo
                };
                
                AppStorage.saveHelpRequest(helpRequest);
                document.getElementById('help-form').reset();
                showNotification('求助请求提交成功，我们会尽快处理');
                
                // 重新加载求助列表
                this.loadHelpPage();
            },
            
            // 加载VR体验页面
            loadVRPage: function() {
                const vrReflections = AppStorage.getVRReflections();
                const vrList = document.getElementById('vr-reflections-list');
                
                if (vrReflections.length === 0) {
                    vrList.innerHTML = '<p style="text-align: center; padding: 2rem; color: #666;">暂无体验记录</p>';
                    return;
                }
                
                vrList.innerHTML = vrReflections.map(reflection => `
                    <div class="list-item">
                        <div class="item-title">${reflection.scenario}</div>
                        <div class="item-meta">
                            <span>${new Date(reflection.timestamp).toLocaleString()}</span>
                        </div>
                        <p>${reflection.reflection}</p>
                    </div>
                `).join('');
            },
            
            // 开始VR体验
            startVRExperience: function(scenario) {
                document.querySelector('#vr .card:first-child').style.display = 'none';
                document.getElementById('vr-experience').style.display = 'block';
                document.getElementById('vr-scenario-title').textContent = scenario;
                
                let content = '';
                
                switch(scenario) {
                    case '被排斥者视角':
                        content = `
                            <p>在这个体验中，您将扮演一名被同学排斥的学生。</p>
                            <p>场景：午餐时间，您独自坐在食堂角落，周围的同学都在欢声笑语，但没有人邀请您加入。</p>
                            <p>请思考：</p>
                            <ul>
                                <li>您此刻的感受是什么？</li>
                                <li>您希望得到什么样的帮助？</li>
                                <li>如果您是旁观者，您会怎么做？</li>
                            </ul>
                            <div class="form-group">
                                <label class="form-label">您的反思和感受</label>
                                <textarea class="form-control" id="vr-reflection" rows="4" placeholder="请记录您的体验感受..."></textarea>
                            </div>
                            <button class="btn btn-primary" onclick="AppState.saveVRReflection('${scenario}')">保存反思</button>
                        `;
                        break;
                    case '旁观者视角':
                        content = `
                            <p>在这个体验中，您将扮演一名旁观者，目睹同学被排斥的场景。</p>
                            <p>场景：课间休息时，您看到几名同学在嘲笑一名同学的穿着。</p>
                            <p>请思考：</p>
                            <ul>
                                <li>您此刻的感受是什么？</li>
                                <li>您会采取什么行动？</li>
                                <li>如何既能帮助被排斥者，又不让自己陷入困境？</li>
                            </ul>
                            <div class="form-group">
                                <label class="form-label">您的反思和感受</label>
                                <textarea class="form-control" id="vr-reflection" rows="4" placeholder="请记录您的体验感受..."></textarea>
                            </div>
                            <button class="btn btn-primary" onclick="AppState.saveVRReflection('${scenario}')">保存反思</button>
                        `;
                        break;
                    case '支持者视角':
                        content = `
                            <p>在这个体验中，您将学习如何成为一名有效的支持者。</p>
                            <p>场景：您注意到一名同学最近情绪低落，似乎遇到了困难。</p>
                            <p>请思考：</p>
                            <ul>
                                <li>您会如何接近这位同学？</li>
                                <li>您会说些什么来表达关心？</li>
                                <li>如果对方不愿意开口，您会怎么做？</li>
                            </ul>
                            <div class="form-group">
                                <label class="form-label">您的反思和感受</label>
                                <textarea class="form-control" id="vr-reflection" rows="4" placeholder="请记录您的体验感受..."></textarea>
                            </div>
                            <button class="btn btn-primary" onclick="AppState.saveVRReflection('${scenario}')">保存反思</button>
                        `;
                        break;
                }
                
                document.getElementById('vr-content').innerHTML = content;
            },
            
            // 退出VR体验
            exitVRExperience: function() {
                document.querySelector('#vr .card:first-child').style.display = 'block';
                document.getElementById('vr-experience').style.display = 'none';
            },
            
            // 保存VR体验反思
            saveVRReflection: function(scenario) {
                const reflectionText = document.getElementById('vr-reflection').value;
                
                if (!reflectionText) {
                    showNotification('请填写您的反思', true);
                    return;
                }
                
                const reflection = {
                    scenario,
                    reflection: reflectionText
                };
                
                AppStorage.saveVRReflection(reflection);
                showNotification('反思保存成功');
                this.exitVRExperience();
                
                // 重新加载VR体验列表
                this.loadVRPage();
            },
            
            // 加载数据分析页面
            loadAnalyticsPage: function() {
                // 更新统计数据
                AppStorage.updateDashboardStats();
                
                // 绘制图表
                this.drawCharts();
            },
            
            // 绘制图表
            drawCharts: function() {
                // 问题类型分布图表
                const reports = AppStorage.getReports();
                const typeCounts = {};
                
                reports.forEach(report => {
                    typeCounts[report.type] = (typeCounts[report.type] || 0) + 1;
                });
                
                const typeLabels = Object.keys(typeCounts).map(type => this.getReportTypeName(type));
                const typeData = Object.values(typeCounts);
                
                const typeChartCtx = document.getElementById('report-type-chart').getContext('2d');
                new Chart(typeChartCtx, {
                    type: 'doughnut',
                    data: {
                        labels: typeLabels,
                        datasets: [{
                            data: typeData,
                            backgroundColor: [
                                '#4a6fa5',
                                '#166088',
                                '#e63946',
                                '#28a745',
                                '#ffc107'
                            ]
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
                
                // 情绪趋势图表（模拟数据）
                const moodChartCtx = document.getElementById('mood-trend-chart').getContext('2d');
                new Chart(moodChartCtx, {
                    type: 'line',
                    data: {
                        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        datasets: [{
                            label: '积极情绪',
                            data: [65, 59, 80, 81, 76, 85],
                            borderColor: '#28a745',
                            tension: 0.1
                        }, {
                            label: '消极情绪',
                            data: [28, 48, 40, 19, 26, 15],
                            borderColor: '#e63946',
                            tension: 0.1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false
                    }
                });
                
                // 干预效果图表（模拟数据）
                const interventionChartCtx = document.getElementById('intervention-chart').getContext('2d');
                new Chart(interventionChartCtx, {
                    type: 'bar',
                    data: {
                        labels: ['言语霸凌', '社交排斥', '身体伤害', '网络霸凌'],
                        datasets: [{
                            label: '干预前',
                            data: [12, 19, 8, 5],
                            backgroundColor: '#e63946'
                        }, {
                            label: '干预后',
                            data: [4, 8, 2, 1],
                            backgroundColor: '#28a745'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false
                    }
                });
            },
            
            // 加载个人中心页面
            loadProfilePage: function() {
                const userProfile = document.getElementById('user-profile');
                
                if (!this.currentUser) {
                    userProfile.innerHTML = '<p style="text-align: center; padding: 2rem;">请先登录查看个人信息</p>';
                    return;
                }
                
                userProfile.innerHTML = `
                    <div class="form-group">
                        <label class="form-label">用户名</label>
                        <p>${this.currentUser.username}</p>
                    </div>
                    <div class="form-group">
                        <label class="form-label">角色</label>
                        <p>${this.getRoleName(this.currentUser.role)}</p>
                    </div>
                    ${this.currentUser.realName ? `
                        <div class="form-group">
                            <label class="form-label">真实姓名</label>
                            <p>${this.currentUser.realName}</p>
                        </div>
                    ` : ''}
                    ${this.currentUser.class ? `
                        <div class="form-group">
                            <label class="form-label">班级/部门</label>
                            <p>${this.currentUser.class}</p>
                        </div>
                    ` : ''}
                    <div class="form-group">
                        <label class="form-label">注册时间</label>
                        <p>${new Date(this.currentUser.registerTime).toLocaleString()}</p>
                    </div>
                `;
            }
        };

        // 通知功能
        function showNotification(message, isError = false, duration = 3000) {
            // 移除现有通知
            const existingNotification = document.getElementById('notification');
            if (existingNotification) {
                existingNotification.remove();
            }
            
            // 创建新通知
            const notification = document.createElement('div');
            notification.id = 'notification';
            notification.className = isError ? 'notification error' : 'notification';
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 100px;
                right: 20px;
                padding: 1rem 1.5rem;
                border-radius: 8px;
                background: ${isError ? 'var(--accent)' : 'var(--success)'};
                color: white;
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
                z-index: 1100;
                transition: all 0.3s;
            `;
            
            document.body.appendChild(notification);
            
            // 自动隐藏
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.style.opacity = '0';
                    setTimeout(() => {
                        if (notification.parentNode) {
                            notification.parentNode.removeChild(notification);
                        }
                    }, 300);
                }
            }, duration);
            
            return notification;
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化应用状态
            AppState.init();
            
            // 初始化Gitee应用管理器
            GiteeAppManager.initServiceWorker();
            
            // 设置默认时间为当前时间
            const now = new Date();
            const formattedNow = now.toISOString().slice(0, 16);
            document.getElementById('incident-time').value = formattedNow;
            
            // 默认选择学生角色
            document.querySelector('.role-btn.student').click();
            
            // 显示Gitee部署提示
            if (window.location.hostname.includes('gitee')) {
                showNotification('欢迎使用Gitee部署的破圈·醒觉系统', false, 5000);
            }
        });
    </script>
</body>
</html>